<template>
    <el-card shadow="never" class="card-border-none">
        <list-header :permissions="{
            create:'createNotice,POST',
            refresh:'getNoticeList,GET'
            }"
            @create="handleCreate"
            @refresh="getData"
        ></list-header>

        <el-table id="list-table" :data="tableData" stripe lazy>
            <el-table-column label="公告标题" prop="title"/>
            <el-table-column prop="create_time" align="left" width="380" label="发布时间"/>
            <el-table-column v-permission="['updateNotice,POST','deleteNotice,POST']" fixed="right" label="操作" width="180" align="center">
                <template #default="{ row }">

                    <el-button v-permission="['updateNotice,POST']" link type="primary" size="small" @click="handleEdit(row)">修改</el-button>

                    <el-popconfirm title="是否要删除该记录？" @confirm="handleDelete(row.id)" confirm-button-text="是" cancel-button-text="否">
                        <template #reference>
                            <el-button v-permission="['deleteNotice,POST']" link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination
            :currentPage="currentPage" 
            background
            layout="prev, pager, next"
            :page-size="limit"
            :total="total"
            @current-change="getData"></el-pagination>
        </div>

        <form-drawer
        ref="formDrawerRef"
        :title="drawerTitle"
        :showActions="true"
        :destroyOnClose="true"
        @submit="handleSubmit">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false" size="default">
                <el-form-item label="公告标题" prop="title">
                    <el-input v-model="form.title" placeholder="公告标题"></el-input>
                </el-form-item>
                <el-form-item label="公告内容" prop="content">
                    <el-input type="textarea" v-model="form.content" placeholder="公告内容" :rows="5"></el-input>
                </el-form-item>
            </el-form>
        </form-drawer>
    </el-card>
</template>
<script setup>
import ListHeader from '~/components/ListHeader.vue'
import FormDrawer from '~/components/FormDrawer.vue'
import { 
    createNotice,
    updateNotice,
    getNoticeList,
    deleteNotice 
} from '~/api/notice'
import { useInitTable,useInitForm } from '~/composables/useCommon'

// 初始化表格数据
const {
    // 分页
    currentPage,
    limit,
    total,
    // 表格数据
    tableData,
    // 获取数据方法
    getData,
    handleDelete,
} = useInitTable({
    getList:getNoticeList,
    deleteData:deleteNotice
})

// 初始化表单
const {
    drawerTitle,
    form,
    formRef,
    rules,
    formDrawerRef,
    handleSubmit,
    handleCreate,
    handleEdit
} = useInitForm({
    // 表单初始数据
    form:{
        id:null,
        title:"",
        content:""
    },
    // 表单验证规则
    rules:{
        title:[{ 
                required:true,
                message:"公告标题不能为空",
                trigger:'blur' ,
        }],
        content:[{
            required:true,
            message:"公告内容不能为空",
            trigger:'blur' ,
        }],
    },
    // 获取数据方法
    getData,
    // 新增数据api
    createData:createNotice,
    // 修改数据api
    updateData:updateNotice
})
</script>
<style lang="scss" scoped>
.card-border-none {
    border: none;
    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
}
:deep(.el-card__body) {
    background: #fff;
    border-radius: 4px;
}
</style>